<template>
    <div>
        <el-calendar>
            <template slot="dateCell" slot-scope="{ data }">
                <p :class="data.isSelected ? 'is-selected' : ''" @click="dialogFormVisible = true">
                    {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                    <br>
                    <span>房间价格:{{ PriceList.normalPrice }}</span>
                    <br>
                    <span>房间数量:{{ PriceList.roomQuantity }}</span>
                </p>
            </template>
        </el-calendar>
        <el-dialog title="修改价格" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="房间价格" :label-width="formLabelWidth">
                    <el-input v-model="form.normalPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房间数量" :label-width="formLabelWidth">
                    <el-input v-model="form.roomQuantity" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="UpdateHousing">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import splitPane from '../components-demo/split-pane.vue'
import { Update, Find } from '@/api/HousingPrice'
export default {
    components: { splitPane },
    data() {
        return {
            PriceList: [],
            housinglist: {},
            normalPrice: 0,
            roomQuantity: 0,
            form: {
                id: 0,
                housingTypeId: "",
                productName: "",
                normalPrice: "",
                paymentTerm: "",
                accommodationDiscount: "",
                memberPriceDifference: "",
                breakfastServings: "",
                roomQuantity: "",
                checkd: []
            },
            dialogFormVisible: false,
            formLabelWidth: '120px',
            Id: 0,
        }
    },
    methods: {
        UpdateHousing() {
            Update(this.form).then(res => {
                if (res.messag == "产品名称已存在") {
                    this.$message.error("产品名称已存在");
                    return;
                }
                if (res) {
                    this.$message.success("修改成功");
                    location.reload();
                    return;
                }
                else {
                    this.$message.error("修改失败");
                    return;
                }
            })
        },
        GetIdList(Id) {
            Find(Id).then(res => {
                this.PriceList = res.data;
                console.log(this.PriceList);
                this.PriceList.normalPrice = res.data.normalPrice;
                this.PriceList.roomQuantity = res.data.roomQuantity;
                console.log(this.PriceList.normalPrice);
                console.log(this.PriceList.roomQuantity);
            })
        }
    },
    created() {
        this.housinglist = JSON.parse(window.localStorage.getItem("Housing"));
        this.Id = window.localStorage.getItem("Id");
        this.form = this.housinglist;
        this.GetIdList(this.Id);
    }
}
</script>
<style>
.is-selected {
    color: #1989FA;
}
</style>



